<template>
  <div class="box">
    <div class="head">
      <van-icon @click="router.back()" name="arrow-left" />
      <span>套餐详情</span>
      <span></span>
    </div>
    <div class="main">
      <div v-for="i in item" :key="i._id" class="main_item">
        <img :src="i.img" alt="" />
        <div style="display: flex;flex-direction: column;">
          <div>
            <p>{{ i.name }}</p>
            <p >价格：<span style="color: red;">￥{{ i.price }}</span></p>
          </div>
          <p>{{ i.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup >
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
const router = useRoute();
const item = ref(JSON.parse(router.query.item) || []);
console.log(item.value);
</script>
<style  scoped>
.box {
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.head {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  background-color: #f6f8fa;
  box-sizing: border-box;
  padding: 0 10px;
}

.main {
  width: 100%;
  height: 90vh;
  background-color: #f6f8fa;
  box-sizing: border-box;
  padding: 0 10px;
}
.main_item {
  width: 100%;
  height: 25%;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.main_item img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.main_item p {
  font-size: 1.2rem;
  margin-top: 10px;
}
</style>